<html>

<head>
  <title>Express</title>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
  <h1>Express</h1>
  <p onclick="camera()">Welcome to Express</p>
  <p onclick="choicePic()">choice Picture</p>
  <p onclick="showPic()">show Picture</p>
  <p onclick="upPic()">upload Picture</p>
  <div class="img">
    <a id="link"></a>
    <img src="" alt="" id="img">
  </div>
</body>
<script>
  axios.get('/getTicket?url=' + window.location.href.split("#")[0]).then(res => {
    const data = res.data;
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      ...data,
      // appId: '', // 必填，公众号的唯一标识
      // timestamp: , // 必填，生成签名的时间戳
      // nonceStr: '', // 必填，生成签名的随机串
      // signature: '',// 必填，签名
      jsApiList: ['scanQRCode', 'chooseImage', 'uploadImage', 'previewImage', 'downloadImage', 'getLocalImgData', 'getLocation'] // 必填，需要使用的JS接口列表
    });
  })
  wx.ready(function () {
    console.log('ready');
  });
  wx.error(function (res) {
    console.log('error', res);
  });
  function camera() {
    wx.scanQRCode({
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        console.log('scan', result);
      }
    });
  }
  function choicePic() {
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
        console.log('chooseImage', localIds);
        wx.uploadImage({
          localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
            console.log('serverId', serverId);
            wx.downloadImage({
              serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
                var localId = res.localId; // 返回图片下载后的本地ID
                console.log('localId', localId);
                wx.getLocalImgData({
                  localId, // 图片的localID
                  success: function (res) {
                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                    console.log('localData', localData);
                    const img = document.getElementById('img')
                    img.src = localData
                  }
                });
              }
            });
          }
        });
      }
    });
  }
  function showPic() {
    // wx.previewImage({
    //   urls: [
    //     'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617374420&t=1f10fc5f247d50caf5fb18f97fc56744',
    //     'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg',
    //   ]
    // });
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: function (res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        console.log(res, speed);
      }
    });
  }
</script>
<style>
  .img {
    width: 100%;
    height: 300px;
  }

  .img img {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

</html>